<%@ page contentType = "text/html;charset=utf-8" %>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Henz Mobile</title>
<link rel="stylesheet" type="text/css" href="/css/report.css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<%=com.henz.web.variable.HenzApp.API_KEY%>"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/js/jquery.henzBind.js"></script>
<script src="/js/jquery.henz.ajax.js"></script>
<script src="/_ah/channel/jsapi"></script>
<script src="/js/jquery.henz.channel.js"></script>
<style>

div.mapDiv{
	width:100%;
	height:350px;
	border:solid 0px;
}

div.titleArea{
	width:100%;
	height:25px;
	color:rgb(91,91,91);
	font-size: 1.3em;
	border:solid 3px rgb(230,230,230);
	text-align:left;
	vertical-align:middle;
	background: -webkit-linear-gradient(rgb(251,251,251), rgb(240,240,240)); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgb(251,251,251), rgb(240,240,240)); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgb(251,251,251), rgb(240,240,240)); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgb(251,251,251), rgb(240,240,240)); /* Standard syntax */
}

div.dataArea{
	width:100%;
	height:35px;
	/*
	border:solid 3px rgb(230,230,230);
	*/
	overflow-x:auto;
}

div.detailDiv{
	width:100%;
	height:calc(100% - 350px);
	border:solid 0px;
}

div.mapArea{
	width:100%;
	height:calc(100% - 222px);
}

div.detailArea{
	width:250px;
	height:150px;
	float: left;
	overflow: auto;
}

div.messageArea{
	width:calc(100% - 250px);
	height:150px;
	float: right;
}

div.messageDisplay{
	width:100%;
	height:calc(100% - 25px);
	overflow:auto;
}

div.messageInput{
	width:100%;
	height:25px;
}

input.msgInput{
	width:100%;
	height:100%;
}

span.reportItem{
	background-color:#CDCDCD;
	border-left:solid 2px #333333;
	border-right:solid 2px #333333;
	padding: 0px;
}

span.hilightItem{
	background-color:#44EE44;
}
</style>
<script>
$(document).ready(init);

var reportMap;

var detailObj = {
	  crudStatus:'C'
	, email: 'sixvern@gmail.com'
	, type: ''
	, name: ''
	, desc: ''
	, long: ''
	, lat : ''
};

var curLong;
var curLat;
var dataDiv;

var channelObj;
function init(){
	
	var mapOptions = {
		  zoom: 11
	};
	
	reportMap = new google.maps.Map(
		document.getElementById('report_map_area')
		, mapOptions
	);
	
	dataDiv = $( '.dataArea' );
	var browserSupportFlag = false;
	if(navigator.geolocation) {
		browserSupportFlag = true;
		navigator.geolocation.getCurrentPosition(function(position) {
			curLong = position.coords.longitude;
			curLat = position.coords.latitude;
			initialLocation = new google.maps.LatLng(curLat,curLong);
			reportMap.setCenter(initialLocation);
		}, function() {
			handleNoGeolocation(browserSupportFlag);
		});
	}else {
		browserSupportFlag = false;
		handleNoGeolocation(browserSupportFlag);
	}

	//$(".detailForm").henzBind({bindObj : detailObj});
	channelObj = $(".messageArea").henzChannel({});
	
	search();
	
}

function handleNoGeolocation(errorFlag) {
	if (errorFlag == true) {
		alert("Geolocation service failed.");
		initialLocation = newyork;
	} else {
		alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
		initialLocation = siberia;
	}
	reportMap.setCenter(initialLocation);
}

var markerList = [];
var curMarker;

function search(){
	for( var mi = 0; mi < markerList.length; mi++ ){
		if(markerList[ mi ] != null){
			markerList[ mi ].setMap(null);
		}
	}
	markerList = [];
	dataDiv.empty();
	$.fn.hajax({
		url :"/report/list.json",
		data:{CUR_LAT:curLat,CUR_LONG:curLong},
		success: function(dataObj, textStatus, jqXHR){
			console.log( 'success....' );
			console.log( dataObj );
			var data = dataObj.reportList;
			var addSrc;
			var dataObj;
			
			var dataDPKey = [
			     { key:'objKey'  , title:'Key'    }
			   , { key:'email'   , title:'Email'  }
			   , { key:'phoneNum', title:'Phone'  }
			   , { key:'name'    , title:'Name'   }
			   , { key:'address' , title:'Address'}
			   , { key:'desc'    , title:'Msg'    }
			   , { key:'curTime' , title:'Time'   }
			];
			 
			for( var di = 0 ; di < data.length; di ++ ){
				dataObj = data[ di ];
				
				dataDiv.append("" 
					+ "<span class='reportItem' tabindex='" + di + "'>"
					+ dataObj[ 'objKey' ] 
					+ "</span>"
				);
				
				var itemDiv;
				
				itemDiv = dataDiv.find( '.reportItem:eq(' + di + ')' );
				itemDiv.data( 'jsonObj', data[ di ] );
				
				var reportMarker = null;
				if( data[ di ].lat != null && data[ di ].lat != '0' ){
					reportMarker = new google.maps.Marker({
						position : new google.maps.LatLng(
							  data[ di ].lat
							, data[ di ].long
						)
						, map : reportMap
						, icon : 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
						//, title : 'Report'
						, title : data[ di ].address
					});
					reportMarker.info = new google.maps.InfoWindow({
						content: '<b>idx:</b> ' + di
					});
					reportMarker[ 'itemDiv' ] = itemDiv;
					google.maps.event.addListener(reportMarker, 'click', function() {
						this[ 'itemDiv' ].click();
						this[ 'itemDiv' ].focus();
						//this.info.open(reportMap, this);					
						
					});
					itemDiv.data( 'mapMarker', reportMarker );
				}
				
				itemDiv.bind( 
					  'click'
					, function() {
						var curObj = $(this);
						var curDataObj = curObj.data();
						var selMarker;
						
						console.log( curDataObj );
						
						$( '.hilightItem' ).removeClass( 'hilightItem' );
						curObj.addClass( 'hilightItem' );
						//$( '.hilightItem' ).focus();
						curObj.focus();
						
						selMarker = curDataObj.mapMarker;
						
						if( curMarker != null ){
							curMarker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
							curMarker.setZIndex( 0 );
						}
						
						if( selMarker != null ){
							reportMap.setCenter(selMarker.getPosition());
							
							selMarker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
							selMarker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
							curMarker = selMarker;
						}
						
						var detailSrc = "<div>";
						for( var dj = 0; dj < dataDPKey.length; dj++ ){
							detailSrc += dataDPKey[ dj ].title + " : " + curDataObj.jsonObj[ dataDPKey[ dj ].key ] + "<br>";
						}
						detailSrc += "</div>";
						
						$( '.detailArea' ).html( detailSrc );
						
					}
				);
				
				markerList.push( reportMarker );
				
			}
			$( '.reportItem:eq(0)' ).click();

			console.log('success....');
		},
		error : function(jqXHR, textStatus, errorThrown) {
			console.log('error....');
			console.log(errorThrown);
			console.log('error....');
		}
	});
}

function add() {
	console.log('add');
	
	detailObj.crudStatus = 'C';
	
	var rdVal = Math.random() * 10;
	
	if( rdVal < 2 ){
		detailObj.long = null;
		detailObj.lat  = null;
	} else if( rdVal < 5 ){
		detailObj.long = 0;
		detailObj.lat  = 0;
	}else{
		detailObj.long = ( curLong + ( ( Math.random() / 5 ) - 0.1 ) );
		detailObj.lat  = ( curLat  + ( ( Math.random() / 5 ) - 0.1 ) );
	}
	
	detailObj.long = ( curLong + ( ( Math.random() / 5 ) - 0.1 ) );
	detailObj.lat  = ( curLat  + ( ( Math.random() / 5 ) - 0.1 ) );
	
	detailObj.name = 'title['  + ( new Date() ) + ']';
	detailObj.curTime = ( new Date() );
	
	var saveData;
	saveData = {reportList:new Array(detailObj)};
	
	$.fn.hajax({
		url : "/report/add.json",
		data : saveData,
		success : function(data, textStatus, jqXHR) {
			console.log('success....');
			console.log(data);
			console.log('success....');
			search();
		},
		error : function(jqXHR, textStatus, errorThrown) {
			console.log('error....');
			console.log(errorThrown);
			console.log('error....');
		}
	});
}
</script>
</head>
<body>
	<div id='report_map_area' class='mapArea'>
		map area
	</div>
	<div class='titleArea'>
		Incoming Alert
		<a href='javascript:search();'>search</a>
		<a href='javascript:add();'>add</a>
	</div>
	<div class='dataArea'>
		dataArea
	</div>
	<div class='detailArea'>
		detailArea
	</div>
	<div class='messageArea'>
		<div class='messageDisplay'>
			messageArea
		</div>
		<div class='messageInput'>
			<input type='text' id='msgInput' name='msgInput' class='msgInput'>
		</div>
	</div>
</body>
</html>

